<template>
  <div class="tabs">
    <div
      :class="[{ 'tabs-active': activeTab === item.id }, 'item']"
      @click="tabsStore.switchTab(item.id)"
      v-for="(item, index) in getTabs"
      :key="index"
    >
      <span class="title">{{ item.title }}</span>
      <span
        v-if="!item.fixed"
        @click.stop="tabsStore.deleteTab(item.id)"
        :class="[{ 'active-close': activeTab === item.id }]"
        >x</span
      >
    </div>
  </div>
</template>

<script setup lang="ts">
import { useTabsStore } from "@/stores/tabs";
import { storeToRefs } from "pinia";

const tabsStore = useTabsStore();
const { activeTab, getTabs } = storeToRefs(tabsStore);
</script>

<style lang="less" scoped>
.tabs {
  display: flex;
  background-color: #fff;
  border: 1px solid #d9d9d9;
  height: 35px;
  .item {
    padding: 5px;
    margin: 2px 5px;
    border: 1px solid #d9d9d9;
    cursor: pointer;
    transition: background-color, color 100ms;
    display: flex;
    justify-content: space-between;
    border-radius: 2px;

    .title {
      margin-right: 15px;
    }

    :hover {
      color: #2980b9;
    }
  }

  &-active {
    background-color: #2980b9;
    color: #fff;

    :hover {
      color: #fff !important;
    }
  }
}

.active-close {
  opacity: 1;
}

.close {
  opacity: 0;
}
</style>
